<template>  
<!--  <view class="container">  
    <view class="top-left-icon">  
      <image src="/static/my.png" mode="aspectFit" style="position: absolute; top: 0; left: 0; width: 30px; height: 30px;"></image>  
    </view>  
  
	  <view class="middle-content">  
      <view class="search-bar">  
        <view class="search-icon">   
          <image src="/static/history.png" mode="aspectFit" style="position: absolute; top: 600rpx; left: 30px; width: 45px; height: 45px;" @click="showSearchHistory"></image>
			<view v-if="showHistory" class="history-container">
				<text v-for="(history, index) in searchHistory" :key="index" class="history-item" @click="handleHistoryClick(history)">{{ history }}</text>
			</view>
        </view> 
        <input type="text" class="search-input" placeholder="请输入搜索内容" v-model="searchQuery" @input="handleInput" @confirm="search"/>  
      <view class="search-icon right">  
          <image src="/static/microphone.png" mode="aspectFit" style="position: absolute; top: 650rpx; right: 30px; width: 45px; height: 45px;" @click="navigateToPage()"></image>  
        </view>  
      </view>  
      <button class="search-btn" @click="search">搜索</button>  
    </view>  
  
    <view class="bottom-icon">  
      <image src="/static/collect.png"  @click="navigateToNewPage" mode="aspectFit" style="position: absolute; right: 30px; width: 45px; height: 45px;"></image>  
    </view>  
  </view> --> 
     <view class="container">  
       <view class="top-left-icon" @click="handleLogin">  
         <image src="/static/my.png" mode="aspectFit" style="position: absolute; top: 0; left: 0; width: 30px; height: 30px"></image>  
       </view>  
     
		<view class="search-box">  
         <input type="text" class="search-input" placeholder="请输入搜索内容" v-model="searchValue" />  
       </view>
		   <view class="history-container" v-if="historyList.length > 0">  
		     <text>历史记录：</text>  
		     <view class="history-item" v-for="(item, index) in historyList" :key="index" @click="handleSelectHistory(item)">  
		       {{ item }}  
		     </view>  
		   </view>
     
       <view class="favorite-icon" @click="goToFavorites">  
         <image src="/static/collect.png" mode="aspectFit"></image>  
       </view>  
     </view> 
</template>

<script>
 	// export default {
 	// 	data() {
 	// 		return {
 	// 			 searchQuery: '', 
 	// 			 searchHistory: [],
		// 		 showHistory: false,
 	// 		};
 	// 	},
 	// 	onLoad() {

 	// 	},
 	// 	methods: { 
 	// 		    handleInput(e) {  
 	// 		      this.searchQuery = e.detail.value;
		// 	      console.log('输入内容：', e.detail.value);  
 	// 		    },
 	// 		    showSearchHistory() {  
		// 	    uni.showToast({  
 	// 		    title: '显示搜索历史',  
 	// 		    icon: 'none'  
 	// 		    });  
 	// 		    },
 	// 			  search() {  
 	// 			        if (this.searchQuery.trim()) {    
 	// 			          if (!this.searchHistory.includes(this.searchQuery)) {  
 	// 			            this.searchHistory.unshift(this.searchQuery); 
 	// 			            if (this.searchHistory.length > 10) {  
 	// 			              this.searchHistory.pop();  
		// 		            }    
 	// 			            uni.setStorageSync('searchHistory', this.searchHistory);  
		// 		          }  
				      
 	// 			          this.searchQuery = '';  
 	// 			        }  
 	// 			      },   
		// 		      showSearchHistory() {  
 	// 			        // 从本地存储中获取搜索历史（如果之前没有从本地存储读取过）  
 	// 			        // 这里假设你已经在某个地方（如created或mounted钩子中）从本地存储读取了searchHistory  
 	// 			        // 如果searchHistory为空，则再次从本地存储加载  
 	// 			        if (this.searchHistory.length === 0) {  
 	// 			          const storedHistory = uni.getStorageSync('searchHistory') || [];  
 	// 			          this.searchHistory = storedHistory;  
		// 		        }  
 	// 			        this.showHistory = true;  
 	// 			      },  
 	// 			      handleHistoryClick(history) {  
 	// 			        this.searchQuery = history;  
 	// 			        this.showHistory = false;  
 	// 			      },  
 	// 			    },  
 	// 			  mounted() {  
 	// 			    const storedHistory = uni.getStorageSync('searchHistory') || [];  
 	// 			    this.searchHistory = storedHistory;  
 	// 			  },  
 	// 			};
					
 	// 		     navigateToPage() {  
		// 	       uni.navigateTo({  
 	// 		         url: '/pages/listen/listen'
 	// 		       });  
 	// 		     },
					
 	// 		     search() {  
 	// 		       console.log('搜索内容：', this.searchQuery);  
 	// 		       uni.request({})  
 	// 		     }  
 	// 		  }  
 	// 		 };
	export default {  
	  data() {  
	    return {  
	      searchValue: '',   
	    };  
	  },  
	  methods: {  
	    // handleLogin() {  
	    //   uni.navigateTo({  
	    //     url: '/pages/login/login'  
	    //   });  
	    // },  
	    goToFavorites() {  
	      uni.navigateTo({  
	        url: '/pages/collect/collect'  
	      });  
	    },
		  
		  handleSearch() {  
		    if (this.searchValue.trim() !== '') {  
		      this.checkAndUpdateHistory(this.searchValue);  
		    }  
		  },
		  
		async checkAndUpdateHistory(searchValue) {  
		    try {  
		      const history = await uni.getStorageSync('searchHistory') || [];  
		  
		      if (!history.includes(searchValue)) {  
		        history.unshift(searchValue);  
		  		history = history.slice(0, 10);  
		    
		        uni.setStorageSync('searchHistory', history);  
		      }  
		    } 
			catch (error) {  
		      console.error('Error accessing storage:', error);  
		    }  
		  },  
		  
		  loadHistory() {  
		    try {  
		      const history = uni.getStorageSync('searchHistory') || [];  
		      this.historyList = history;  
		    } 
			catch (error) {  
		      console.error('Error loading history:', error);  
		    }  
		  },
			
			handleSelectHistory(item) {  
			this.searchValue = item;  
			  },
		}
	}  
	
</script>

<style>
/* 	 .container {  
	  display: flex;  
	  flex-direction: column;  
	  height: 100vh; 
	  padding: 10px;   
	  box-sizing: border-box;  
	}  
	  
	.top-left-icon {  
	  align-self: flex-start; 
	  margin-top: 10px;  
	}  
	  
	.middle-content {  
	  display: flex;  
	  flex-direction: column;  
	  align-items: center;  
	  justify-content: center; 
	  flex: 1;   
	}  
	  
	.search-bar {  
	  display: flex;  
	  align-items: center;  
	  background-color: #f0f0f0;   
	  border-radius: 5px;   
	  padding: 10px;
	  width: 80%;
	  max-width: 600px;
	}  
	  
	.search-icon {  
	  padding: 0 10px;  
	}  
	  
	.search-icon.right {  
	  order: 2;
	  
	.search-input {  
	  flex: 1; 
	   height: 40px;
	  padding: 0 10px;  
	  border: none;  
	  outline: none;  
	}  
	  
	.search-btn {  
	  margin-top: 10px;   
	  padding: 10px 20px;  
	  background-color: red; 
	  color: white;  
	  border: none;  
	  border-radius: 5px;
	  cursor: pointer;
	}  
	  
	.bottom-icon {  
	  position: absolute;  
	  bottom: 20px;  
	  left: 50%; 
	  transform: translateX(-50%);  
	}  */
	.container {  
	 display: flex;
	 flex-direction: column;  
	 height: 100vh; 
	 padding: 10px;   
	 box-sizing: border-box;  
	}  
	  
	.top-left-icon {  
	 align-self: flex-start;
	 margin-top: 10px;  
	}  
	  
	.favorite-icon {  
	  top: auto;   
	  bottom: 20px; 
	}  
	  
	.search-box {  
	  margin-top: 50px; 
	  width: 80%;  
	}  
	  
	.search-input {  
	  width: 100%;  
	  padding: 10px;  
	  border: 1px solid #ccc;  
	  border-radius: 5px;  
	}
</style>
